// ==UserScript==
// @name         畅游 + 蒲公英 网页生成对应的二维码
// @namespace    http://www.changyou.com/index.shtml
// @version      1.3
// @description  畅游+ 用于蒲公英发布的测试包页面, 生成快捷二维码图片
// @author       张福润
// @match        https://www.pgyer.com/*
// @grant        none
// @require https://html2canvas.hertzen.com/dist/html2canvas.min.js
// @updateURL https://gitee.com/zfr-project/cy-test-info-youhou-js/blob/master/cy-youhou-js.user.js

// ==/UserScript==

(function() {
    'use strict';
    // 时间格式化
    Date.prototype.Format = function (fmt) { //author: meizz
        if (typeof this == 'string') {
            return this;
        }

        if (!fmt) fmt = "yyyy-MM-dd hh:mm:ss";

        if (!this || this == null) return null;
        var o = {
            'M+': this.getMonth() + 1, // 月份
            'd+': this.getDate(), // 日
            'h+': this.getHours(), // 小时
            'm+': this.getMinutes(), // 分
            's+': this.getSeconds(), // 秒
            'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
            'S': this.getMilliseconds() // 毫秒
        }
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
        for (var k in o) {
            if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
        return fmt
    }


    const inputStyle = document.createElement('style');


    const iconImage = ""
    const loadingImage = ""
    let downloadFinish = false
    function clickAction() {
        // 获取当前网页链接
        const pageLink = window.location.href;

        const updateTitleStleName = "content-title";
        const updateContentStyleName = 'update-description';
        const customInputStyleName = 'custom-input';

        // 获取更新说明详情
        const updateContentDiv = document.querySelector('.' + updateContentStyleName);
        let updateContentHTML = '';
        if (updateContentDiv) {
            // 获取内容的HTML和样式
            updateContentHTML = updateContentDiv.innerHTML;
        } else {
            updateContentHTML = 'No Content';
        }

        // 创建二维码的数据，包括链接
        const qrCodeData = pageLink;
        const qrCodeDataURL = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(qrCodeData)}&size=200x200`;

        //  接下来 是布局
        // base view
        const allPage = document.createElement('div');
        document.body.appendChild(allPage);


        // 显示容器
        const container = document.createElement('div');
        allPage.appendChild(container);

        // 二维码
        const qrCodeContainer = document.createElement('div');
        container.appendChild(qrCodeContainer);

        // 创建图片元素
        const qrCodeImage = new Image();
        qrCodeContainer.appendChild(qrCodeImage);
        qrCodeImage.src = qrCodeDataURL;


        // icon图标
        const iconContainer = document.createElement('img');
        qrCodeContainer.appendChild(iconContainer);
        // loading
        const loadingContainer = document.createElement('img');
        qrCodeContainer.appendChild(loadingContainer);
        // 右侧容器
        const rightContainer = document.createElement('div');
        container.appendChild(rightContainer);
        // name
        const versionName = document.createElement('versionName');
        rightContainer.appendChild(versionName);


        // 输入框
        const inputField = document.createElement('input');
        rightContainer.appendChild(inputField);

        // 更细说明 标题
        const updateTitleElement = document.createElement('div');
        updateTitleElement.innerHTML = "更新说明";
        updateTitleElement.className = updateTitleStleName;
        rightContainer.appendChild(updateTitleElement);
        // 更细说明 详细
        const updateContentElement = document.createElement('div');
        updateContentElement.innerHTML = updateContentHTML;
        updateContentElement.className = updateContentStyleName;

        rightContainer.appendChild(updateContentElement);
        // 保存按钮
        const saveButton = document.createElement('button');
        rightContainer.appendChild(saveButton);

        // =================================================
        // 样式 base view
        allPage.style.position = 'fixed';
        allPage.style.top = '0';
        allPage.style.left = '0';
        allPage.style.width = '100%';
        allPage.style.height = '100%';
        allPage.style.backgroundColor = 'rgba(0, 0, 0, 0.3)';
        allPage.style.zIndex = '999';

        // 样式 显示容器
        container.style.position = 'fixed';
        container.style.top = '20px';
        container.style.right = '20px';
        container.style.backgroundColor = 'white';
        container.style.padding = '10px';
        container.style.border = '1px solid #ccc';
        container.style.borderRadius = '5px';
        container.style.display = 'flex';
        container.style.alignItems = 'flex-start';
        container.style.marginRight = '100px';

        // 样式 二维码
        qrCodeContainer.style.width = '200px';
        qrCodeContainer.style.height = '200px';
        qrCodeContainer.style.backgroundSize = 'cover';
        qrCodeContainer.style.backgroundRepeat = 'no-repeat';
        //        qrCodeContainer.style.backgroundImage = `url(${qrCodeDataURL})`;
        qrCodeContainer.style.position = 'relative';
        // 样式 icon图标
        iconContainer.src = iconImage;
        iconContainer.style.position = 'absolute';
        iconContainer.style.width = '30px';
        iconContainer.style.height = '30px';
        iconContainer.style.left = '0px';
        iconContainer.style.right = '0px';
        iconContainer.style.top = '0px';
        iconContainer.style.bottom = '0px';
        iconContainer.style.margin = 'auto';
        iconContainer.style.borderRadius = '8px';
        iconContainer.style.opacity = 0;

        // 样式loading
        loadingContainer.src = loadingImage;
        loadingContainer.style.position = 'absolute';
        loadingContainer.style.width = '30px';
        loadingContainer.style.height = '30px';
        loadingContainer.style.left = '0px';
        loadingContainer.style.right = '0px';
        loadingContainer.style.top = '0px';
        loadingContainer.style.bottom = '0px';
        loadingContainer.style.margin = 'auto';
        loadingContainer.style.borderRadius = '8px';
        loadingContainer.style.animation = 'rotate 2s linear infinite';
        // 样式 右侧容器
        rightContainer.style.marginLeft = '20px';
        rightContainer.style.display = 'flex';
        rightContainer.style.flexDirection = 'column';

        const customVersionStyle = `
        .custom-input {
        color: #ffa500 !important;
        font-size: 28px;
        line-height: 42px;
        height: 50px;
        border: none;
        padding: 5px; /* 添加内边距以增加输入框内容与边框的距离 */
        border-bottom: 2px solid #ffa500; /* 添加底部边框以指示输入框 */
        outline: none; /* 移除默认的输入框轮廓 */
        margin-bottom: 15px;
        }
        }`;

        versionName.className = customInputStyleName;
        versionName.innerHTML = customVersionStyle;

        // 样式 输入框
        inputField.type = 'text';
        inputField.placeholder = '当前版本内容';
        inputField.className = customInputStyleName;
        inputStyle.innerHTML = customVersionStyle;
        // 样式 标题
        updateTitleElement.style.fontSize = '20px';
        // 样式 详情
        updateContentElement.style.maxWidth = '500px';

        // 样式 保存按钮
        saveButton.textContent = '保存为图片';
        saveButton.style.marginTop = '20px';
        saveButton.style.backgroundColor = 'blue';
        saveButton.style.color = 'white';
        saveButton.style.border = 'none';
        saveButton.style.borderRadius = '5px';
        saveButton.style.cursor = 'pointer';

        // 添加保存按钮点击事件处理程序
        saveButton.addEventListener('click', function() {
            // 获取输入框的内容并去除空格
            const inputContent = inputField.value.trim();

            // 检查输入框内容是否为空
            if (inputContent === '') {
                alert('请输入当前版本内容');
                return;
            }

            // 隐藏保存按钮

            imageCreating(true)

            // 使用HTML2Canvas库将整个div内容保存为图片（包括二维码）
            html2canvas(container,{
                useCORS:true
            })
                .then(function(canvas) {
                // 将canvas转换为图片URL
                const image = canvas.toDataURL('image/png');
                // 时间
                const currentDate = new Date();

                const dateString = currentDate.Format("yyyy-MM-dd hh:mm:ss");
                // 创建一个下载链接
                const link = document.createElement('a');
                link.href = image;
                link.download = '畅游+ ' + inputContent + '_'+ dateString + '.png'

                // 模拟点击下载链接
                link.click();

                imageCreating(false)
            });
        });

        function safeDivShowOrHide(isShow) {
            iconContainer.style.opacity = isShow ? 1 :0;
            saveButton.style.opacity = isShow ? 1 :0;
            loadingContainer.style.opacity = isShow ? 0 :1;
            qrCodeContainer.style.backgroundColor = isShow ? "#FFF" : "#DDD";
        };

        function imageCreating(isCreateing) {
            versionName.style.display= isCreateing ? 'block' : 'none';
            inputField.style.display= isCreateing ?'none' : 'block';
            saveButton.style.display = isCreateing ? 'none' : 'block';
        }

        allPage.addEventListener('click', function(event) {
            // 检查点击事件的目标元素是否是 container 或其后代元素
            if (!container.contains(event.target)) {
                // 如果不是 container 或其后代元素，则执行移除操作
                document.body.removeChild(allPage);
            }
        });


        // 设置图片加载完成时的事件处理程序
        qrCodeImage.onload = function() {
            downloadFinish = true
            safeDivShowOrHide(true)
        };

        // 尝试从本地缓存中获取上次保存的内容
        const localDataKey = 'com.changyou.input.version.des';
        const savedContent = localStorage.getItem(localDataKey);
        if (savedContent) {
            inputField.value = savedContent;
            versionName.textContent = savedContent;
        }

        // 添加输入事件处理程序，以保存输入内容到本地缓存
        inputField.addEventListener('input', function() {
            const contentToSave = inputField.value;
            versionName.textContent = contentToSave;
            localStorage.setItem(localDataKey, contentToSave);
        });

        // 执行默认逻辑
        safeDivShowOrHide(false)
        imageCreating(false)
    };




    // 检查当前网页的URL是否匹配 www.pgyer.com
    const href = window.location.href;
    const pattern = /^https:\/\/www\.pgyer\.com\/[a-zA-Z0-9]+$/;

    if (pattern.test(href)) {

        // 页面内容初始化
        document.head.appendChild(inputStyle);


        // 创建一个按钮元素
        const button = document.createElement('button');
        button.textContent = '畅游+ 二维码';
        button.style.backgroundColor = 'black';
        button.style.color = 'white';
        button.style.width = '60px';
        button.style.height = '60px';
        button.style.position = 'fixed';
        button.style.top = '100px';
        button.style.right = '20px';
        button.style.border = 'none';
        button.style.borderRadius = '20%';
        button.style.cursor = 'pointer';
        button.style.fontSize = '14px';
        button.style.fontWeight = 'bold';
        button.style.zIndex = '998';


        // 添加点击事件处理程序
        button.addEventListener('click', clickAction);

        // 将按钮添加到页面
        document.body.appendChild(button);

        console.log(window.location)
    } else {
        console.log(href, "不满足创建二维码页面")
    }

})();
